<template>
  <div class="register cash">
    <van-nav-bar :title="$t('withdraw.title')" leftArrow @click-left="_return" />
    <van-tabs active="active" @change="onChange">
      <van-tab :title="$t('withdraw.pay1')">
        <div class="cashMain">
          <van-cell :title="$t('common.coin')" :value="account" @click.native="chooseCoin" is-link />
          <div class="moves">
            <p>{{$t('withdraw.available')}}</p>
            <van-row type="flex" align="bottom">
              <van-col span="6" offset="8">{{(Number(nowprice)).toFixed(2)}}</van-col>
              <van-col span="3" offset="6">{{account}}</van-col>
            </van-row>
            <!--<p>{{$t('withdraw.frozen')}}：{{Number(price.dj).toFixed(2)}} {{account}}</p>-->
          </div>
          <div class="press login">
            <van-field v-model="cash.address" :placeholder="$t('withdraw.address_remind')">
              <p slot="button">{{$t('withdraw.address')}}</p>
            </van-field>
            <van-field v-model="cash.tag" :placeholder="$t('withdraw.address_tag')" />
            <van-field v-model="cash.remark" :placeholder="$t('withdraw.address_remark')" />
            <van-field
              v-model="cash.price"
              type="number"
              @input="press(cash.price)"
              :placeholder="$t('withdraw.amount_remind')"
            >
              <p slot="button">{{account}}</p>
            </van-field>
            <van-row type="flex" justify="space-between" align="center">
              <van-col>≈ {{amount}} USDT</van-col>
              <van-col style="color:#f6543e" @click.native="allWiths">{{$t('withdraw.all')}}</van-col>
            </van-row>
            <p class="notice">
              <span style="display: block">{{$t('withdraw.notice')}}</span>
              {{$t('withdraw.notice_b')}}
            </p>
            <button class="btn" @click="submit">{{$t('common.confirm')}}</button>
          </div>
          <div class="cashRecord" v-if="record">
            <p class="tip">{{$t('withdraw.record')}}</p>
            <ul>
              <li v-for="item in record">
                <van-row type="flex" justify="space-between" align="center">
                  <van-col>-{{Number(item.num).toFixed(4)}} {{item.coin_name.toUpperCase()}}</van-col>
                  <van-col>
                    <p class="org">{{item.status}}</p>
                    <span>{{item.add_time}}</span>
                  </van-col>
                </van-row>
              </li>
            </ul>
          </div>
        </div>
        <van-popup v-model="typeShow" position="bottom" :overlay="true">
          <van-picker
            show-toolbar
            :title="$t('info.coins')"
            :columns="columns"
            @cancel="onCancel"
            @confirm="onConfirmlqb"
          />
        </van-popup>
        <van-popup v-model="pwdShow" position="bottom" :overlay="true">
          <van-nav-bar :title="$t('pay.title')" leftArrow @click-left="pwdShow = false" />
          <div class="pwdMain login">
            <van-cell-group>
              <van-field
                v-model="payPassword"
                :placeholder="$t('pay.title')"
                input-align="center"
                type="password"
                maxlength="6"
              />
            </van-cell-group>
            <p @click="forgetPwd">{{$t('common.forget_password')}}？</p>
            <div class="btns">
              <van-button type="info" @click="submitMove">{{$t('pay.button')}}</van-button>
            </div>
          </div>
        </van-popup>
        <loading v-if="loadingShow"></loading>
      </van-tab>
      <van-tab :title="$t('withdraw.pay2')">
        <div class="cashMain">
          <van-cell :title="$t('common.coin')" :value="account" @click.native="chooseCoin" is-link />
          <div class="moves">
            <p>{{$t('withdraw.available')}}</p>
            <van-row type="flex" align="bottom">
                <van-col span="6" offset="8">{{(Number(price.ye)).toFixed(2)}}</van-col>
              <van-col span="3" offset="6">{{account}}</van-col>
            </van-row>
            <!--<p>{{$t('withdraw.frozen')}}：{{Number(price.dj).toFixed(2)}} {{account}}</p>-->
          </div>
          <div class="press login">
            <van-field v-model="cash.address" :placeholder="$t('withdraw.address_remind')">
              <p slot="button">{{$t('withdraw.address')}}</p>
            </van-field>
            <van-field v-model="cash.tag" :placeholder="$t('withdraw.address_tag')" />
            <van-field v-model="cash.remark" :placeholder="$t('withdraw.address_remark')" />
            <van-field
              v-model="cash.price"
              type="number"
              @input="press(cash.price)"
              :placeholder="$t('withdraw.amount_remind')"
            >
              <p slot="button">{{account}}</p>
            </van-field>
            <van-row type="flex" justify="space-between" align="center">
              <van-col>≈ {{amount}} USDT</van-col>
              <van-col style="color:#f6543e" @click.native="allWith">{{$t('withdraw.all')}}</van-col>
            </van-row>
            <p class="notice">
              <span style="display: block">{{$t('withdraw.notice')}}</span>
              {{$t('withdraw.notice_a')}}
            </p>
            <button class="btn" @click="submit">{{$t('common.confirm')}}</button>
          </div>
          <div class="cashRecord" v-if="record">
            <p class="tip">{{$t('withdraw.record')}}</p>
            <ul>
              <li v-for="item in record">
                <van-row type="flex" justify="space-between" align="center">
                  <van-col>-{{Number(item.num).toFixed(4)}} {{item.coin_name.toUpperCase()}}</van-col>
                  <van-col>
                    <p class="org">{{item.status}}</p>
                    <span>{{item.add_time}}</span>
                  </van-col>
                </van-row>
              </li>
            </ul>
          </div>
        </div>
        <van-popup v-model="typeShow" position="bottom" :overlay="true">
          <van-picker
            show-toolbar
            :title="$t('info.coins')"
            :columns="columnsznn"
            @cancel="onCancel"
            @confirm="onConfirm"
          />
        </van-popup>
        <van-popup v-model="pwdShow" position="bottom" :overlay="true">
          <van-nav-bar :title="$t('pay.title')" leftArrow @click-left="pwdShow = false" />
          <div class="pwdMain login">
            <van-cell-group>
              <van-field
                v-model="payPassword"
                :placeholder="$t('pay.title')"
                input-align="center"
                type="password"
                maxlength="6"
              />
            </van-cell-group>
            <p @click="forgetPwd">{{$t('common.forget_password')}}？</p>
            <div class="btns">
              <van-button type="info" @click="submitMove">{{$t('pay.button')}}</van-button>
            </div>
          </div>
        </van-popup>
        <loading v-if="loadingShow"></loading>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      account: "AAT",  
      cash: {
        address: "",
        tag: "",
        remark: "",
        price: ""
      },
      amount: "0.00",
      typeShow: false,
      columns: [],
      columnsznn:[],
      price: {ye: "0",dj: "0"},
      pwdShow: false,
      payPassword: "",
      record: [],
      rate: "",
      rateList: null,
      loadingShow: false,
      active: 0,
      balanceassets:this.$route.params.coin,
      pricelist:{},
      nowprice:'',
      base:''
    };
  },
  methods: {
    _return() {
      this.$emit("_return");
    },
    getData() {
      this.$api.get("index/getCoins").then(res => {
        console.log(res)
        this.columns = [];
        this.columnsznn=[];
        res.detail.map(i => {
          if(i.unit == 'AAT'){
            this.columns.push(i.unit)
          }else{
            this.columnsznn.push(i.unit)
          }
          console.log(this.columnsznn)
        }
        );
      });
    },

    onChange(e){
      console.log(e)
      if(e==0){
        this.account="AAT"
      }else{
        this.account="ETH"
        this.getAsset()
      }
    },

    //获取汇率
    getlqb(bi){
      console.log(this.balanceassets)
      var that=this
      var amout=this.balanceassets
      amout=JSON.parse(JSON.stringify(amout)); 
      var that=this
      console.log(amout)
      amout.map(i=>{
        if(i.unit == bi){
          that.nowprice=i.balance
        }
      })
         this.$api.post('index/index')
          .then(res =>{
              console.log(res.detail)
              var list=res.detail.price
              that.pricelist=list
          
          })
      

    },

    //根据汇率计算总数
    changeamout(money,bi){
      console.log(bi)
      var list=this.pricelist
      list=JSON.parse(JSON.stringify(list)); 
      var lastt=''
     console.log(list)
      // var lv=list[bi]
      //  lastt=money*lv
     if(bi =='USDT' ){
        var lv=1
        lastt=money/lv
     console.log(lv)
     }else{
       var lv=list[bi]
       lastt=money*lv
     }
     console.log(lastt)
     return lastt
    //  console.log(this.base)
    //   this.price.ye=this.base/lv
      // console.log(this.price.ye)
    },

    chooseCoin() {
      this.typeShow = true;
    },
    onCancel() {
      this.typeShow = false;
    },
    onConfirm(data) {
      this.account = data;
      // Object.keys(this.rateList).map(i => {
      //   if (this.account != "USDT") {
      //     this.rate = this.rateList[this.account];
      //   } else {
      //     this.rate = 1;
      //   }
      // });
      this.onCancel();
      this.getAsset();
    },
    onConfirmlqb(data) {
      this.account = data;
      this.getlqb(data)
      // Object.keys(this.rateList).map(i => {
      //   if (this.account != "USDT") {
      //     this.rate = this.rateList[this.account];
      //   } else {
      //     this.rate = 1;
      //   }
      // });
      this.onCancel();
      this.getAsset();
    },
    press(data) {
      var account=this.account
      this.amount = this.changeamout(data,account);
      
    },
    getAsset() {
      this.$api
        .post("user/assoper", {
          type: 2,
          coin_name: this.account.toLowerCase(),
          page: 1
        })
        .then(res => {
          console.log(res)
          this.price = res.detail.lqbblance;
          this.base=res.detail.lqbblance.ye;
          this.rateList = res.detail.bilv;
          Object.keys(this.rateList).map(i => {
            if (this.account != "USDT") {
              this.rate = this.rateList[this.account];
            } else {
              this.rate = 1;
            }
          });
        });
      this.$api.post("user/cashrecord").then(res => {
        this.record = res.detail;
        this.record.map(i => {
          i.add_time = moment(i.add_time * 1000).format("YYYY-MM-DD");
          switch (i.status) {
            case 1:
              i.status = this.$t("withdraw.state_three");
              break;
            case 2:
              i.status = this.$t("withdraw.state_one");
              break;
            case 3:
              i.status = this.$t("withdraw.state_two");
              break;
          }
        });
        if (this.record.length === 0) {
          this.record = false;
        }
      });
    },
    allWith() {
      var that=this
      if (this.price.ye.toString().indexOf(".") != -1) {
        this.cash.price = this.price.ye
          .toString()
          .substr(0, this.price.ye.toString().indexOf("."));
      } else {
        this.cash.price = this.price.ye;
        this.amount=that.changeamout(this.price.ye,"USDT")
      }
    },
    allWiths() {
      var that=this
      if (this.nowprice.toString().indexOf(".") != -1) {
        this.cash.price = this.nowprice.toString().substr(0, this.nowprice.toString().indexOf("."));
          this.amount=that.changeamout(this.nowprice,"USDT")

      } else {
        this.cash.price = this.nowprice;
        this.amount=that.changeamout(this.nowprice,"USDT")
      }
    },
    submit() {
      if (!this.cash.address) {
        this.$toast(this.$t("withdraw.address_remind"));
        return;
      }
      if (!this.cash.tag) {
        this.$toast(this.$t("withdraw.address_tag"));
        return;
      }
      if (!this.cash.remark) {
        this.$toast(this.$t("withdraw.address_remark"));
        return;
      }
      if (!this.cash.price) {
        this.$toast(this.$t("withdraw.amount_remind"));
        return;
      }
      if (Number(this.cash.price) <= 0) {
        this.$toast(this.$t("info.cashWarn"));
        return;
      }
      // if (Number(this.amount) > Number(this.price.ye)) {
      //   this.$toast(this.$t("info.cash"));
      //   return;
      // }
      this.pwdShow = true;
    },
    submitznn(){
      this.$toast("功能正在升级，暂时无法使用");
    },
    forgetPwd() {
      this.$router.push({ name: "safe", params: { mine: this.$route.path } });
    },
    submitMove() {
      if (!this.payPassword) {
        this.$toast(this.$t("pay.title"));
        return;
      }
      let param = {
        coin_name: this.account.toLowerCase(),
        address: this.cash.address,
        label: this.cash.tag,
        remark: this.cash.remark,
        num: this.cash.price,
        paypassword: this.payPassword
      };
      this.loadingShow = true;
      this.$api.post("user/cashapply", param).then(res => {
        this.loadingShow = false;
        this.$toast(res.message);
        // this._return();
      });
    },
  },
  created() {
    // this.getData();
    // this.getAsset();
    // this.getlqb();
  },
  mounted() {
    this.nowprice=this.balanceassets
    this.getlqb("AAT");
    this.getData();
    // this.getAsset();
    this.$emit("disappear");
  }
};
</script>

<style lang="stylus" scoped>
bac = none;
back = linear-gradient(90deg, #53d9b5, #2bc299) !important;
font = #23ba92;
fonts = #898989;

[class*=van-hairline]::after {
  border: none;
}

.pwdMain {
  width: 96%;
  margin: 0 auto;

  .van-cell-group {
    border-top: 1px solid #ebedf0;
    border-bottom: 1px solid #ebedf0;
  }

  p {
    text-align: center;
    color: #FDDEB0;
    font-size: 12px;
    margin-top: 10px;
  }

  .van-cell {
    background: #fff !important;
    color: #26c196;

    .van-cell__value {
      color: #FDDEB0;
    }
  }

  .btns {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    margin-top: 170px;
    padding-bottom: 15px;

    .van-button {
      width: 100%;
      color: #000;
      background: linear-gradient(180deg, #54d8b4, #26c196);
      border: none;
      /* margin-left: 5%; */
    }
  }
}

.cashMain {
  width: 94%;
  margin: 0 auto;

  .van-cell {
    background: back;
    color: #135a47;
    border-radius: 5px;

    .van-cell__value, .van-cell__right-icon {
      color: #1F1F1F;
    }
  }

  .moves {
    background: linear-gradient(90deg, #53d9b5 0%, #2bc299 50%, #35cca3 100%);
    margin-top: 10px;
    padding: 10px 10px 15px;
    border-radius: 5px;

    p {
      color: #135a47;
      font-size: 12px;

      &:last-child {
        margin-top: 5px;
      }
    }

    .van-row {
      margin-top: 5px;
      align-items: baseline;

      .van-col {
        text-align: center;
      }

      .van-col--6 {
        font-size: 34px;
        color: #fff;
      }

      .van-col--3 {
        color: #594E3F;
      }
    }
  }

  .press {
    margin-top: 15px;

    .van-cell {
      background: none !important;
      border-radius: 0;

      .van-field__button p {
        color: #D8D8D8;
      }
    }

    .van-cell:not(:last-child)::after {
      border: none;
    }

    .van-cell {
      border-bottom: 1px solid #ebebeb;
    }

    .van-col {
      color: font;
      margin-top: 10px;
    }

    .notice {
      margin-top: 25px;
      color: #D8D8D8;
      font-size: 12px;
    }

    .btn {
      margin-top: 10px;
      color: #fff;
    }
  }

  .cashRecord {
    margin-top: 20px;

    .tip {
      border-left: 3px solid font;
      padding-left: 3px;
      color: #333333;
    }

    ul {
      margin-top: 15px;

      li {
        background: bac;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 10px;
        border-bottom: 1px solid #ebebeb;

        .van-col {
          color: font;
          font-size: 20px;

          p {
            color: font;
            font-size: 14px;
          }

          p.org {
            font-size: 16px;
            color: #f6543e;
          }

          span {
            font-size: 10px;
            color: #898989;
          }
        }
      }
    }
  }
}
</style>